<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚订单-详情</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">

    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
</head>

<body>
    <div class="app-wrap " v-cloak id="jdd_baojia">
        <header-top></header-top>
        <header-search-global type="服务"></header-search-global>
        <div class="bg-gray">
            <div class="container">
                <common-crumb :crumblist="crumblist"></common-crumb>
                <div class="jfuwu-baojia-wrap">
                    <div class="left-wrap">
                        <div class="top">
                            <div class="biaoti">采购商</div>
                        </div>
                        <div class="bottom">
                            <img :src="buyUserInfo.picImg" class="logo">
                            <p>{{buyUserInfo.name}}</p>
                            <!--<p class="xinyong">信用等级：</p>
                            <p>
                                <span v-for="n in 5">
                                        <i class="icon-star s1" v-if="n<=sjinfo.star"></i>
                                        <i class="icon-star s0" v-else></i>
                                    </span>
                            </p>-->
                            <div class="contact">{{buyUserInfo.telephone}}</div>
                        </div>
                    </div>
                    <div class="right-wrap">
                        <div class="ordernum-wrap icon-jfw-zdy">
                            <div class="box">
                                <div>订单数量：<span class="num">{{material.num}}</span>{{material.unitName}}</div>
                                <div class="line2" >收到报名（{{materialQuotationList.length}}）</div>
                            </div>
                        </div>
                        <div class="con-box">
                            <p class="title">{{order.name}}</p>
                            <div class="fabudate">
                                <p>发布时间：{{material.createDate}}</p>
                                <p>订单有效截止日期：{{material.deadline}}</p>
                            </div>
                            <div>
                                <p class="biaoti">对卖家要求</p>
                                <div class="require">
                                    <div class="r-row first">
                                        <div class="r-cell c1">面料分类</div>
                                        <div class="r-cell c2">{{order.name}}</div>
                                    </div>
                                    <div class="r-row">
                                        <div class="r-cell c1">供货地区</div>
                                        <div class="r-cell c2">{{material.areaName}}</div>
                                    </div>
                                </div>
                            </div>
                            <div >
                                <p class="biaoti">已报卖家</p>
                                <div class="maijialist pl-15">
                                    <img :src="maijia.companyLogoUrl" v-for="maijia in materialQuotationList">
                                </div>
                            </div>
                            <div>
                                <p class="biaoti">补充说明</p>
                                <p class="pl-15">{{material.describe}}</p>
                            </div>
                            <div>
                                <p class="biaoti">图片描述</p>
                                <div class="miaoshulist pl-15">
                                    <img :src="miaoshu.fileUrl" v-for="miaoshu in attachmentList">
                                </div>
                            </div>
                        </div>
                        <form class="con-box" v-if="isCompany">
                            <p class="biaoti mt-0">报价单</p>
                            <div class="pl-15">
                                <p class="biaoti2">含税价</p>
                                <div class="shuiprice-wrap">
                                    <input v-model="quotation.total" type="text">
                                    <span class="unit-wrap" @click="toggleshowunit">{{unitName}}<i class="icon-index_search_arr"></i></span>
                                    <div class="unitlist" v-show="showunit">
                                        <span @click="chooseUnit(item)" v-for="item in unit">{{item.name}}</span>
                                    </div>
                                </div>
                                <p class="biaoti2">包装方式</p>
                                <div class="btn-group">
                                    <span class="btn" v-for="bz in packing" @click="chooseBaozhuang(bz.number)" :class="{'active':baozhuang==bz.number}">{{bz.name}}</span>
                                </div>
                                <p class="biaoti2">运输方式</p>
                                <div class="btn-group">
                                    <span class="btn" v-for="ys in transport" @click="chooseYunshu(ys.number)" :class="{'active':yunshu==ys.number}">{{ys.name}}</span>
                                </div>
                                <p class="biaoti2">规格</p>
                                <div class="guige-wrap">
                                    <textarea v-model="quotation.spec" class="mark" placeholder="描述商品规格、成分、工艺（选填）"></textarea>
                                    <div class="radio-group">
                                        <span @click="chooseGuigeType(1)"><i class="icon-radio" :class="[guigetype==1 ? 'r1' : 'r0']"></i>现货</span>
                                        <span @click="chooseGuigeType(2)"><i class="icon-radio" :class="[guigetype==2 ? 'r1' : 'r0']"></i>预定</span>
                                    </div>
                                </div>
                                <p class="biaoti2">留言</p>
                                <textarea v-model="quotation.remarks" class="mark" placeholder="给买家留言（选填）"></textarea>
                                <p class="biaoti2">上传相同或近似图片</p>
                                <div>
                                    <!-- 上传图片 -->
                                    <common-upimg :preimg="imgDescribe" :testoption="{ maxwidth:100,maxheight:100,volume:40,maxlength:1}"></common-upimg>
                                </div>
                            </div>
                            <div class="submit-wrap">
                                <button type="button" @click="submitQuotation()">立即报价</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <common-footer></common-footer>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>
    <script>
        jdd_baojia();
    </script>
</body>

</html>